import React, { Component } from 'react';
import {NavLink} from 'react-router-dom'
import {getCate,getGoods} from '../request/cate'
import '../asserts/css/cate.css'
class Cate extends Component {
    state = {
        //商品目录
        getCateList:[],
        //获取商品分类
        getGoodsList:[],
        fid:1,
        catename:"时令水果"
    }
    UNSAFE_componentWillMount()
    {
        //商品分类接口
        getCate().then(res=>{
            if(res.code === 200)
            {
                this.setState({getCateList:res.list})
            }
        });
        getGoods(this.state.fid).then(res=>{
            if(res.code === 200)
            {
                this.setState({getGoodsList:res.list})
            }
        })
    }
    changeFid(fid,catename)
    {
        this.setState({fid})
      getGoods(fid).then(res=>{
        this.setState({getGoodsList:res.list})
      })
      this.setState({catename})
    }
    render() {
        let {getCateList,getGoodsList,fid,catename} = this.state
        return (
            <>
                <div className="page-title">商品分类</div>
                {/* <!-- 主体 --> */}
                <div id="content">
                    <ul className="left">
                        {
                           getCateList.map(item=>{
                               return   <li className={item.id === fid ? "active" : ""} key={item.id} onClick={()=>{this.changeFid(item.id,item.catename)}}>{item.catename}</li>
                           })
                        }
                    </ul>
                    <ul className="right">
                        <li className="section">
                            <div className="sectionTitle">
                                <h3>{catename}</h3>
                                <span><NavLink to={"/goodslist?id="+fid}>查看更多&gt;</NavLink></span>
                            </div>
                            <ul>
                                {
                                    getGoodsList.map(item=>{
                                        return <li key={item.id}>
                                                  <img src={this.$staticUrl + item.img} alt="" />
                                                  <p>{item.goodsname}</p>
                                                </li>
                                    })
                                }

                            </ul>
                        </li>
                    </ul>
                </div>
            </>
        )
    }
}

export default Cate;